<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02-scroll系列</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            border: 10px solid red;
            padding: 3px;
            overflow: auto;  /* 滑动栏 */
        }
    </style>
</head>
<body>
    <div>
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
        雨下整夜我的爱溢出就像雨水
    </div>
    <script>
     /*   
     scroll 意思是 滚动的   
      1. scrollHeigh/scrollWidth: 返回的是实际的高度，
               包括被卷去的头部。
            2. scrollHeight   =  height + padding
            3. scroll 滚动事件
            4. scrollTop  返回被卷去的头部的距离，返回数值不带单位
    */
      /* 
            总结:
            offsetWidth    =  height + padding + border
            clientHeight   =  height + padding
            scrollHeight   =  height + padding  (实际的高度，包括卷去的头部)
       */
      var div = document.querySelector('div');

      console.log(div.clientHeight);   // 206  height + padding

      console.log(div.scrollHeight);  // 233

        // scroll 滚动事件  当我们滚动条发生变化会触发的事件
      div.addEventListener('scroll',function(){
          console.log(div.scrollTop);  // 卷去的头部距离
      });
    </script>
</body>
</html>